<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>账户信息</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <style>
        /* 最上方logo */
        #top{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 60px;
            background-color: #8fbbc3;
        }
        #logo{
            position: absolute;
            left: 0px;
            top: 3px;
            width: 177px;
        }
        #logo p{
            color: white;
            font-weight: 700;
            font-size: 24px;
            margin:0px;
            text-align: center;
            font-family: STXingkai;
        }
        /* 右上退出 */
        #exit{
            position: absolute;
            right: 10px;
            top: 18px;
        }
        /* 上方导航栏 */
        #nav{
            position: absolute;
            left: 160px;
            top: 60px;
            width: 1360px;
            height: 35px;
        }
        /* 左侧导航栏 */
        #left{
            position: absolute;
            left: 0px;
            top: 60px;
            width: 161px;
            height: 100%;
            background-color: #989494;

        }
        .el-submenu .el-menu-item{
            font-size: 10px;
            min-width: 0;
            height: 30px;
            line-height: 10px;
            vertical-align:middle;
            padding-top: 10px;
        }
        /*上方导航栏标签样式*/
        a{
            text-decoration:none;
            width: 100%;
            height: 100%;
            display: block;
            color: white;
        }
        .table{
            position: absolute;
            left:410px;
            top:250px;

        }
    </style>
</head>

<body>
<div id="app">
    <!-- 最上方logo -->
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创OCP</span>
            </p>
            <p>
                <span>全渠道数字平台</span>
            </p>
        </div>
        <div id="exit">
            <!-- 下拉餐单 -->
            <el-dropdown>
                <span class="el-dropdown-link" style="color: white;">
                  <i class="el-icon-user-solid">admin</i>
                </span>
                <!-- 后续连数据库 -->
                <el-dropdown-menu trigger="click">
                    <el-dropdown-item>水热事业部</el-dropdown-item>
                    <el-dropdown-item>厨电事业部</el-dropdown-item>
                    <el-dropdown-item>热能事业部</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            &nbsp;
            <i class="el-icon-switch-button" style="color: white;"></i>
        </div>
    </div>
    <!-- 上方导航栏 -->
    <div id="nav">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="homepage">首页</el-menu-item>
            <el-menu-item index="2" @click="subAccount">子账号管理</el-menu-item><!--后续修改-->
            <el-menu-item index="3" @click="AccountMeaasge">账户信息</el-menu-item>
            <el-menu-item index="4"  @click="motifyPass">修改密码 </el-menu-item>
            <el-menu-item index="5" @click="information">会员信息 </el-menu-item>
        </el-menu>
    </div>
    <!--中间表格-->
    <div class="table">
        <template>
            <el-table :data="tableData" border style="border:1px solid darkgrey" size="mini" :cell-style="myCellStyle">
                <el-table-column prop="name" label="名称" width="350px" align="center"></el-table-column>
                <el-table-column prop="message" label="信息内容" width="500px" align="center"></el-table-column>

            </el-table>
        </template>
    </div>

    <!-- 侧边导航栏 -->
    <div id="left">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title">
                    <span>订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">提交订单</el-menu-item>
                    <el-menu-item index="1-2">待处理订单</el-menu-item>
                    <el-menu-item index="1-3">采购订单</el-menu-item>
                    <el-menu-item index="1-4">零售订单列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <span>售后管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1"><a href="ChangeGoodsApply.html">申请退换货</a></el-menu-item>
                    <el-menu-item index="2-2"><a href="exchange.html">退换货订单列表</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">产品信息查询</el-menu-item>
                    <el-menu-item index="3-2">库存信息管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <span>会员信息</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1" @click="information" >会员信息</el-menu-item>
                    <el-menu-item index="4-2" @click="motifyPass">修改密码</el-menu-item>
                    <el-menu-item index="4-3" @click="AccountMeaasge">账号信息</el-menu-item>
                    <el-menu-item index="4-4"><a href="subAccount.html">子账号管理</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <span>设置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">网店设置</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</div>
</body>
<script type="module">
    var path=decodeURI(location.href);
    //返回某个指定的字符串值首次出现的位置
    var num=path.indexOf("?");
    var str=path.substr(num+1);
    //$("#loginId").html(str);
    let vm=new Vue({
        el:'#app',
        data(){
            return{
                dealerId:'1',
                activeIndex2: '3',
                tableData: [{
                    name:'客户编码',
                    message:'',
                }, {
                    name:'客户名称',
                    message:'',
                }, {
                    name:'信用额度',
                    message:'',
                }, {
                    name:'实际发货余额',
                    message:'',
                }, {
                    name:'实际商折余额',
                    message:'',
                }, {
                    name:'已缴纳备货保金',
                    message:'',
                }, {
                    name:'备注',
                    message:'',
                }]
            };
        },
        created(){
            this.getDetail();
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            myCellStyle(row) {
                if (row.columnIndex === 0) {
                    return { backgroundColor: "darkgrey", color: "black" };
                }
                return "";
            },
            //跳转
            information(){
                location.href="http://localhost:8088/information?"+str;
            },
            motifyPass(){
                location.href="http://localhost:8088/motifypass?"+str;
            },
            AccountMeaasge()
            {
                location.href="http://localhost:8088/AccountMeaasge?"+str;
            },
            homepage(){
                location.href="http://localhost:8088/homepage?"+str;
            },
            //获取账户信息
            getDetail(){
                var path=decodeURI(location.href);
                //返回某个指定的字符串值首次出现的位置
                var num=path.indexOf("?");
                var str=path.substr(num+1);
                // $("#loginId").html(str);
                console.log("======================>"+str);
                let url="http://localhost:8088/system/account/getDetail?"+"dealerId="+str;
                axios.post(url)
                    .then(result=>{
                        if (result.data.code=="001"){
                            console.log(result.data.data);
                            this.tableData[0].message=result.data.data.customerCode;
                            this.tableData[1].message=result.data.data.customerName;
                            this.tableData[2].message=result.data.data.creditLimit;
                            this.tableData[3].message=result.data.data.actualShipmentBalance;
                            this.tableData[5].message=result.data.data.paymentAmount;
                            this.tableData[6].message=result.data.data.remarks;
                        }
                        else {
                            console.log(result.data.code);
                        }
                    })
            }
        },
    });
</script>
</html>
